<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/" xmlns:lab="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>用户预约记录界面</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        svg {
            width: 36px;
            height: 36px;
        }
    </style>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<header>
    <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">About</h4>
                    <p class="text-muted">Add some information about the album below, the author, or any other
                        background context. Make it a few sentences long so folks can pick up some informative tidbits.
                        Then, link them off to some social networking sites or contact information.</p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <h4 class="text-white">Contact</h4>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">Follow on Twitter</a></li>
                        <li><a href="#" class="text-white">Like on Facebook</a></li>
                        <li><a href="#" class="text-white">Email me</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container">
            <a href="#" class="navbar-brand d-flex align-items-center">
                <svg t="1638709338816" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="8564" width="200" height="200">
                    <path d="M942.08 983.04H122.88V573.44c0-22.528 18.432-40.96 40.96-40.96h737.28c22.528 0 40.96 18.432 40.96 40.96v409.6z"
                          fill="#90CAF9" p-id="8565"></path>
                    <path d="M962.56 1003.52H102.4V573.44c0-34.816 26.624-61.44 61.44-61.44h737.28c34.816 0 61.44 26.624 61.44 61.44v430.08zM143.36 962.56h778.24V573.44c0-12.288-8.192-20.48-20.48-20.48H163.84c-12.288 0-20.48 8.192-20.48 20.48v389.12z"
                          fill="#2196F3" p-id="8566"></path>
                    <path d="M819.2 962.56H245.76V317.44L530.432 108.544l290.816 208.896z" fill="#F44336"
                          p-id="8567"></path>
                    <path d="M532.48 563.2c-73.728 0-133.12-59.392-133.12-133.12s59.392-133.12 133.12-133.12 133.12 59.392 133.12 133.12-59.392 133.12-133.12 133.12z m0-204.8c-38.912 0-71.68 32.768-71.68 71.68s32.768 71.68 71.68 71.68 71.68-32.768 71.68-71.68-32.768-71.68-71.68-71.68z"
                          fill="#FFEBEE" p-id="8568"></path>
                    <path d="M993.28 1024h-921.6c-16.384 0-30.72-14.336-30.72-30.72S55.296 962.56 71.68 962.56h921.6c16.384 0 30.72 14.336 30.72 30.72s-14.336 30.72-30.72 30.72z"
                          fill="#FFC107" p-id="8569"></path>
                    <path d="M460.8 962.56h-61.44v-174.08c0-38.912 32.768-71.68 71.68-71.68h122.88c38.912 0 71.68 32.768 71.68 71.68V962.56h-61.44v-174.08c0-6.144-4.096-10.24-10.24-10.24h-122.88c-6.144 0-10.24 4.096-10.24 10.24V962.56z"
                          fill="#FFEBEE" p-id="8570"></path>
                    <path d="M204.8 339.968c-10.24 0-18.432-4.096-24.576-12.288-10.24-14.336-6.144-32.768 8.192-43.008L491.52 73.728c24.576-16.384 57.344-18.432 81.92-2.048l305.152 210.944c14.336 10.24 16.384 28.672 8.192 43.008-10.24 14.336-28.672 16.384-43.008 8.192L538.624 122.88c-2.048-2.048-8.192-2.048-10.24 0L223.232 333.824c-6.144 4.096-12.288 6.144-18.432 6.144z"
                          fill="#FFC107" p-id="8571"></path>
                </svg>
                <strong>实验室</strong>
            </a>
            <p style="color: red;font-size: 20px">欢迎用户:<span id="username" style="color: red;font-size: 20px"></span>
            </p>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</header>

<main>

    <section class="py-5 text-center container">
        <div class="row py-lg-5">
            <div class="col-lg-6 col-md-8 mx-auto">
                <h1 class="fw-light">预约记录</h1>
                <p class="lead text-muted">实验室信息管理</p>
                <p>
                    <a href="../../templates/bookLab.html" class="btn btn-primary my-2" id="bookButton">预约</a>
                    <a href="../../templates/index.html" class="btn btn-secondary my-2">首页</a>
                    <a href="userInfo.html" class="btn btn-secondary my-2">个人信息</a>
                    <a href="laboratory-time.html" class="btn btn-secondary my-2">实验室开放时间表</a>
                    <button class="btn btn-secondary my-2" onclick="exit()">退出</button>
                </p>
            </div>
        </div>
    </section>

    <div align="center">
        <input type="text" id="orderId" placeholder="请输入订单id">&nbsp;&nbsp;
        <a class="btn btn-primary my-2" onclick="queryById()">查询</a>
    </div>

    <div class="album py-5 bg-light">
        <div class="container">
            <div class="row row-cols-3 row-cols-sm-2 row-cols-md-3 g-3" id="records">
            </div>
        </div>
    </div>
</main>

<footer class="text-muted py-5">
    <div class="container">
        <p class="float-end mb-1">
            <a href="#">Back to top</a>
        </p>
        <p class="mb-1">power by 2021</p>
    </div>
</footer>

<script>
    let data;
    //登录状态
    $(function () {
        $.ajax({
            type: "post",
            url: "http://localhost:8080/user/getCurrentUser",
            success: function (result) {
                let res = result.object;
                if (result.code == '200') {
                    data = {"userid": res.userid};
                    findUserOrder();
                    document.getElementById("username").innerText = res.username;
                    if (res.priority == '0') {
                        document.getElementById("bookButton").style.display = "none";
                    }
                } else {
                    alert("请先登录账号！");
                    window.location.href = "../../templates/login.html";
                }
            }
        });
    });

    //局部用户全部预约记录
    function findUserOrder() {
        $.post('http://localhost:8080/record/findUserRecord', data, function (result) {
            let res = result.object;
            let str = "<div class=\"col\" >";
            for (let i = 0; i < res.length; i++) {
                str += "<div class=\"card shadow-sm\">\n" +
                    "<svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\"\n" +
                    "xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Thumbnail\"\n" +
                    "preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title>\n" +
                    "<rect width=\"100%\" height=\"100%\" fill=\"#55595c\"/>\n" +
                    "<text x=\"50%\" y=\"50%\" fill=\"#eceeef\" dy=\".3em\">实验室图片</text>\n" +
                    "</svg>\n" +
                    "<div class=\"card-body\">";
                str += "<p class=\"card-text\" >订单ID:" + res[i].recordid + "</p>";
                str += "<p class=\"card-text\" >实验室ID:" + res[i].labid + "</p>";
                str += "<p class=\"card-text\" >实验室名称:" + res[i].labname + "</p>";
                str += "<p class=\"card-text\" >用户ID:" + res[i].userid + "</p>";
                str += "<p class=\"card-text\" >用户姓名:" + res[i].username + "</p>";
                str += "<p class=\"card-text\" >学生人数:" + res[i].userNum + "</p>";
                str += "<p class=\"card-text\" >院系:" + res[i].faculty + "</p>";
                str += "<p class=\"card-text\" >开始时间:" + res[i].bookTime + "</p>";
                str += "<div class=\"d-flex justify-content-between align-items-center\">\n" +
                    "<div class=\"btn-group\">\n" +
                    "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" onclick='book(" + res[i].labid + ",\"" + res[i].labname + "\")'>再次预约</button>\n";
                if (res[i].state == '未开始') {
                    str += "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" onclick='abolish(" + res[i].recordid + ")'>取消预约</button>\n";
                }
                str += "</div>\n" +
                    "<small class=\"text-muted\" >" + res[i].state + "</small>\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div></div>";
            }
            $("#records").html(str);
        })
    }

    //根据订单id查询预约订单信息
    function queryById() {
        let id = $("#orderId").val();
        let data = {"recordid": id};
        $.post('http://localhost:8080/record/findRecordById', data, function (result) {
            let res = result.object;
            if (result.code == '200') {
                let str = "<div class=\"col\" >";
                str += "<div class=\"card shadow-sm\">\n" +
                    "<svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\"\n" +
                    "xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Thumbnail\"\n" +
                    "preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title>\n" +
                    "<rect width=\"100%\" height=\"100%\" fill=\"#55595c\"/>\n" +
                    "<text x=\"50%\" y=\"50%\" fill=\"#eceeef\" dy=\".3em\">实验室图片</text>\n" +
                    "</svg>\n" +
                    "<div class=\"card-body\">";
                str += "<p class=\"card-text\" >订单ID:" + res.recordid + "</p>";
                str += "<p class=\"card-text\" >实验室ID:" + res.labid + "</p>";
                str += "<p class=\"card-text\" >实验室名称:" + res.labname + "</p>";
                str += "<p class=\"card-text\" >用户ID:" + res.userid + "</p>";
                str += "<p class=\"card-text\" >用户姓名:" + res.username + "</p>";
                str += "<p class=\"card-text\" >学生人数:" + res.userNum + "</p>";
                str += "<p class=\"card-text\" >院系:" + res.faculty + "</p>";
                str += "<p class=\"card-text\" >开始时间:" + res.bookTime + "</p>";
                str += "<div class=\"d-flex justify-content-between align-items-center\">\n" +
                    "<div class=\"btn-group\">\n" +
                    "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" onclick='book(" + res.labid + ",\"" + res.labname + "\")'>再次预约</button>\n";
                if (res.state == '未开始') {
                    str += "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" onclick='abolish(" + res.recordid + ")'>取消预约</button>\n";
                }
                str += "</div>\n" +
                    "<small class=\"text-muted\" >" + res.state + "</small>\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div></div>";
                $("#records").html(str);
            } else {
                alert("查询失败");
            }
        });
    }

    //跳转到预约界面
    function book(labid, labname) {
        if (window.localStorage) {
            localStorage.labid = labid;
            localStorage.labname = labname;
            window.location.href = "../../templates/bookLab.html";
        }
    }

    //取消订单
    function abolish(id) {
        if (id != null || id != '') {
            $.ajax({
                type: "delete",
                url: "http://localhost:8080/record/deleteRecordById",
                data: "id="+id,
                success: function (result) {
                    if (result.code == '200') {
                        alert("取消成功");
                        location.replace(location.href);
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }
    }

    //退出系统
    function exit() {
        $.post('http://localhost:8080/user/userExit', function (result) {
            if (result.code == '200') {
                alert(result.msg);
                window.location.href="../../templates/login.html";
            } else {
                alert(result.msg)
            }
        });
    }
</script>
</body>
</html>